import selectBrand from "@/components/selectBrand"
import spec from './spec'
import { create, update } from "@/api/product"
export default {
  name: "my-form",
  components: { selectBrand, spec },
  data () {
    return {
      type: 1,
      dialogFormVisible: false,
      params: {
        category_ids: "", // 分类id
        name: "", // 名称
        cover_image: "", // 封面图
        brand_id: "", // 品牌id
        brand_category_id: "", // 品牌类别id
        spec: [],
        detail_images: "", // 详情轮播图
        introduce_images: "", // 详情介绍图
        sort: '',  //排序
        status: 1, // 状态 1-上架 2-下架
      },
      categoryProps: {
        checkStrictly: true,
        value: "id",
        label: "name",
        expandTrigger: "hover",
        emitPath: false,
        multiple: true,
      },
      category_ids: [],
      selectBrand: [], // 已选择的品牌
      brandIds: [], // 已选择的品牌id
      selectBrandCategory: [], // 已选择的品牌类别
      brandCategoryIds: [], // 已选择的品牌类别id
      rules: {
        category_ids: [{
          required: true,
          message: "请选择分类",
          trigger: "blur",
        },],
        name: [{
          required: true,
          message: "请输入商品名称",
          trigger: "blur",
        },
        {
          max: 50,
          message: "长度请勿超过50个字符",
          trigger: "blur",
        },
        ],
        cover_image: [{
          required: true,
          message: "请上传封面图",
          trigger: "blur",
        },],
        brand_id: [{
          required: true,
          message: "请选择品牌",
          trigger: "blur",
        },],
        brand_category_id: [{
          required: true,
          message: "请选择品牌类目",
          trigger: "blur",
        },],
        spec: [
          {
            required: true,
            message: "请添加规格",
            trigger: "blur",
          }
        ],
        detail_images: [{
          required: true,
          message: "请上传详情轮播图",
          trigger: "blur",
        },],
        introduce_images: [{
          required: true,
          message: "请上传详介绍图",
          trigger: "blur",
        },],
        status: [{
          required: true,
          message: "请选择状态",
          trigger: "blur",
        },],
      },
    }
  },
  props: {
    categoryList: {
      type: Array,
      default: () => [],
    },
  },

  methods: {
    show (type = 1, row) {
      this.type = type
      this.dialogFormVisible = true
      if (type == 2) {
        const { id, name, category_ids, cover_image, brand_id, brand_category_id, spec, detail_images, introduce_images, sort, status } = row
        this.params = {
          ...this.params, // 保留已有属性
          id,
          name,
          cover_image,
          brand_id,
          category_ids,
          brand_category_id,
          spec,
          detail_images,
          introduce_images,
          sort,
          status,
        }
        this.category_ids = category_ids
        this.params.category_ids = this.params.category_ids.toString(',')
        this.params.detail_images = this.params.detail_images.toString(',')
        this.params.introduce_images = this.params.introduce_images.toString(',')
        if (row.brand) {
          this.selectBrand = [row.brand]
          this.brandIds = [row.brand_id]
        }
        if (row.brand_category) {
          this.selectBrandCategory = [row.brand_category]
          this.brandCategoryIds = [row.brand_category_id]
        }
        setTimeout(() => {
          this.$refs.spec.getData(row.spec)
        }, 0)
      }
    },
    reset () {
      this.params = {
        category_ids: "", // 分类id
        name: "", // 名称
        cover_image: "", // 封面图
        brand_id: "", // 品牌id
        brand_category_id: "", // 品牌类别id
        spec: [],
        detail_images: "", // 详情轮播图
        introduce_images: "", // 详情介绍图
        sort: '',  //排序
        status: 1, // 状态 1-上架 2-下架
      }
      this.category_ids = []
      this.selectBrand = []
      this.brandIds = []
      this.selectBrandCategory = []
      this.brandCategoryIds = []
      this.$nextTick(() => {
        this.$refs.spec.clear()
        this.$refs.formRef.clearValidate()
      })
    },
    // 选择分类
    categoryChange () {
      this.params.category_ids = this.category_ids.toString(",")
    },
    // 文件选择
    fileConfirm (e) {
      this.params[e.name] = e.fileList.toString(",")
    },
    // 品牌选择
    brandConfirm (e) {
      this.selectBrand = e.list
      this.brandIds = e.ids
      this.params.brand_id = e.ids.join(",")
      this.selectBrandCategory = []
      this.brandCategoryIds = []
    },
    // 品牌类目选择
    brandCategoryConfirm (e) {
      this.selectBrandCategory = e.list
      this.brandCategoryIds = e.ids
      this.params.brand_category_id = e.ids.join(",")
    },
    // 规格操作
    specOperation (e) {
      this.params.spec = e
    },
    // 取消
    cancel () {
      this.reset()
      this.dialogFormVisible = false
    },
    // 提交
    submit () {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          let url = this.type === 1 ? create(this.params) : update(this.params)
          try {
            const res = await url
            this.$msg.successMsg(res.msg)
            this.cancel()
            this.$emit("refresh")
          } catch (ex) {
            console.log(ex)
          }
        }
      })
    },
  },
}